<template>
	<scroll-view  scroll-y="true" class="scroll-Y" @scrolltolower="loadMore" style="height: 98vh">
	<view class="">
		<!-- <v-navigation :value="naviValue"></v-navigation> -->
		<!-- 盈利额 -->
		<view class="top_box">
			<view class="" >
				<view class="jui_fs30" >
					今日盈利(USDT)
				</view>
				<view class="jui_mar_t14" style="">
					{{total.today_profit}}
				</view>
			</view>
			<view class="">
				<view class="jui_fs30">
					累计盈利(USDT)
				</view>
				<view class="jui_mar_t14">
					{{total.total_profit}}
				</view>
			</view>
		</view>
		<!-- 盈利额end -->
		<view class="exchange_bg">
			<view class="jui_bg_fff jui_lrtop box jui_flex jui_flex_justify_between ">
				<view class="jui_flex">
						<view class="jui_flex_col_center jui_mar_r16" v-for="(item,index) in tab" :key="index" @tap="chooseTab(item,index)">
							<view class="">
								{{item.text}}
							</view>
							<view class="jui_mar_t12" :class="tabIndex==index?'on':''">	
							</view>
						</view>
				</view> 
				<view class="jui_h30"></view>
				<view class="jui_bg_f5f  jui_mar_b20" style="width: 100%;padding: 30rpx;border-radius: 16rpx;" @tap="jump('/pages/task/electronic/electronicD?time='+item.finish_time)" v-for="(item,index) in list" :key="index">
			
					<view class="jui_flex_justify_between jui_flex jui_flex_items_center">
						<view class="" v-if="tabIndex==0">
							盈利
						</view>
						<view class="jui_fc_666 jui_fs29">
							{{item.finish_time}}
						</view>
						<view class="jui_fc_zhuse">
							{{item.total_profit}} {{item.symbol}}
						</view>
					</view>
					
				</view>
				<view class="none" v-if="!list.length" >
					暂无数据
				</view>
			</view>
		</view>
	</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				tab:[
					{text:'今日盈利'},
					{text:'累计盈利'}
				],
				tabIndex:0,
				type:0,
				page:1,
				total:'',
				list:[]
			}
		},
		onLoad(options) {
			console.log('11111111111111111',options)
			if(options.index){
				this.tabIndex=options.index
			}
			
			this.electlist()
		},
		methods: {
			loadMore(){
				if(this.hasMore){
					this.page ++ ;
					this.electlist();
				}
			},
			electlist(){
				let data = {
					page:this.page,
					data_list:20,
					// type:this.type
				}
				this.$api.getBill(data).then(res => {
						this.total = res.data;
						if(this.tabIndex == 0){
							this.list = [...this.list, ...res.data.today_data_list.data];
							if (res.data.today_data_list.data.length == 0) {
								this.hasMore = false
							} else {
								this.hasMore = true
							}
						}else {
							this.list = [...this.list, ...res.data.total_data_list.data]
							if (res.data.total_data_list.data.length == 0) {
								this.hasMore = false
							} else {
								this.hasMore = true
							}
						}
						
						
				});
			},
			chooseTab(item, index) {
				this.page = 1;
				this.list = [];
				this.tabIndex = index;
				this.type = index;
				this.electlist();
				
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
	.top_box {
		background: $zhuse;
		padding: 60rpx 20rpx;
		// padding-top: 60rpx;

		display: flex;
		justify-content: space-around;
		align-items: center;

		view {
			color: #FFFFFF;
			font-size: 48rpx;
		}

	}
	.exchange_bg {
		background:$zhuse;
	
		// padding-top: 90rpx;
		.box {
			padding: 50rpx 30rpx 0 30rpx;
			flex-wrap: wrap;
		}
	}
	.on {
		width: 48rpx;
		height: 12rpx;
		background-color: $zhuse;
		border-radius: 6rpx;
		
	}
</style>
